<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>【顺风车】 - 发布订单</title>
<link rel="stylesheet" href="../../static/assets/css/amazeui.css" th:href="@{/assets/css/amazeui.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/common.min.css" th:href="@{/assets/css/common.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/amaze.min.css" th:href="@{/assets/css/amaze.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/other.min.css" th:href="@{/assets/css/other.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/app2.css" th:href="@{/assets/css/app2.css}" />
<script th:inline="javascript">
	var r = [[${r}]];
</script>
</head>
<body class="register-container">
	<div class="layout">
		<div th:include="common/header::header"></div>

		<br />
		<!--===========layout-container================-->
		<div class="am-container" style="background: #fff;">

			<div class="tpl-page-container tpl-page-header-fixed">

				<div th:include="common/nav::nav"></div>


				<div class="tpl-content-wrapper">

					<div class="row">
						<div class="tpl-portlet">
							<div class="tpl-portlet-title">
								<div class="tpl-caption font-green ">
									<span>发布订单</span>
								</div>
							</div>

							<div class="am-tabs tpl-index-tabs">
								<ul class="am-tabs-nav am-nav am-nav-tabs">
									<li th:class="${active=='12'}?'am-active':''">
										<a th:href="@{/front/order/12}">有效订单</a>
									</li>
									<li th:class="${active=='03'}?'am-active':''">
										<a th:href="@{/front/order/03}">历史订单</a>
									</li>
								</ul>

								<div class="am-tabs-bd">
									<div class="am-tab-panel am-fade am-in am-active">
										<table class="am-table am-table-compact am-table-centered">
											<thead>
												<tr>
													<th class="am-text-middle am-text-sm" width="40">序号</th>
													<th class="am-text-middle am-text-sm">出发地</th>
													<th class="am-text-middle am-text-sm">目的地</th>
													<th class="am-text-middle am-text-sm" width="70">出发日期</th>
													<th class="am-text-middle am-text-sm" width="70">出发时间</th>
													<th class="am-text-middle am-text-sm" width="40">价格</th>
													<th class="am-text-middle am-text-sm" width="50" th:if="false">已预定</th>
													<th class="am-text-middle am-text-sm" width="40">状态</th>
													<th class="am-text-middle am-text-sm" width="110">操作</th>
												</tr>
											</thead>
											<tbody>
												<tr th:each="order,s : ${page.content}">
													<th class="am-text-middle am-text-xs" th:text="${s.index + 1}"></th>
													<td class="am-text-middle am-text-xs" th:text="${order.startAddress}"></td>
													<td class="am-text-middle am-text-xs" th:text="${order.stopAddress}"></td>
													<td class="am-text-middle am-text-xs" th:text="${order.goDate}"></td>
													<td class="am-text-middle am-text-xs" th:text="${order.goTime}"></td>
													<td class="am-text-middle am-text-xs" th:text="${order.price1}"></td>
													<td class="am-text-middle am-text-xs" th:text="${order.predeterminedNumber}+'/'+${order.seatNumber}"
														th:if="false"></td>
													<td class="am-text-middle am-text-xs">
														<span class="am-badge am-round am-badge-danger" th:text="${order.orderStateName}"
															th:if="${order.orderState==0}"></span>
														<span class="am-badge am-round am-badge-secondary"
															th:text="${order.orderStateName}+'-'+${order.orderProcessName}" th:if="${order.orderState==1}"></span>
														<span class="am-badge am-round am-badge-success"
															th:text="${order.orderStateName}+'-'+${order.orderProcessName}" th:if="${order.orderState==2}"></span>
														<span class="am-badge am-round am-badge-warning"
															th:text="${order.orderStateName}+'-'+${order.orderProcessName}" th:if="${order.orderState==3}"></span>
													</td>
													<td class="am-text-middle am-text-xs">
														<div class="am-btn-toolbar">
															<!-- 乘客菜单 -->
															<div class="am-btn-group am-btn-group-xs" sec:authorize="${hasAnyAuthority(1)}">
																<a th:if="${order.orderState==2}" th:href="@{'/front/order/payment/'+${order.id}}"
																	class="am-btn am-btn-default am-btn-xs payment"> 付款 </a>
																<a th:if="${order.orderState==1}" th:href="@{'/front/order/cancel/'+${order.id}}"
																	class="am-btn am-btn-default am-btn-xs cancel"> 取消 </a>
																<a th:if="${order.orderState==3}" th:href="@{'/front/order/reserve/comment/'+${order.id}}"
																	class="am-btn am-btn-default am-btn-xs comment"> 查看 </a>
															</div>
															<!-- 司机菜单 -->
															<div class="am-btn-group am-btn-group-xs" sec:authorize="${hasAnyAuthority(2)}">
																<a th:if="${order.orderProcess==1}" th:href="@{'/front/order/confirm/'+${order.id}}"
																	class="am-btn am-btn-default am-btn-xs confirm"> 确认 </a>
																<a th:if="${order.orderState==1}" th:href="@{'/front/order/cancel/'+${order.id}}"
																	class="am-btn am-btn-default am-btn-xs cancel"> 取消 </a>
																<a th:if="${order.orderState==3}" th:href="@{'/front/order/reserve/view/'+${order.id}}"
																	class="am-btn am-btn-default am-btn-xs view"> 查看 </a>
															</div>
														</div>
													</td>
												</tr>
											</tbody>
										</table>
										<div id="page"></div>
									</div>


								</div>
							</div>

						</div>
					</div>



				</div>

			</div>

		</div>
	</div>
	<br />

	<div th:include="common/footer::footer"></div>

	<script src="../../static/assets/js/jquery-2.1.0.js" charset="utf-8" th:src="@{/assets/js/jquery-2.1.0.js}"></script>
	<script src="../../static/assets/js/amazeui.js" charset="utf-8" th:src="@{/assets/js/amazeui.js}"></script>
	<script src="../../static/assets/layer/layer.js" charset="utf-8" th:src="@{/assets/layer/layer.js}"></script>
	<script src="../../static/assets/laypage/laypage.js" charset="utf-8" th:src="@{/assets/laypage/laypage.js}"></script>
	<script src="../../static/assets/js/core.js" charset="utf-8" th:src="@{/assets/js/core.js}"></script>
</body>
<script type="text/javascript">
	if (r) {
		if (r.code == 0) {
			layer.msg(r.message, {
				icon : 1
			});
		} else {
			layer.msg(r.message, {
				icon : 2
			});
		}
	}

	$(".cancel").confirmOperator({
		msg : "确定要取消订单吗？"
	});
	$(".confirm").confirmOperator({
		msg : "确认后不能再取消订单。"
	});
	$(".payment").confirmOperator({
		msg : "确定付款吗？"
	});

	laypage({
		cont : 'page1',
		pages : totalPages,
		curr : function() {
			var page = location.search.match(/page=(\d+)/);
			return page ? page[1] : 1;
		}(),
		jump : function(e, first) {
			if (!first) {
				location.href = '?page=' + e.curr;
			}
		}
	});

	//以下将以jquery.ajax为例，演示一个异步分页
	function demo(curr) {
		$.getJSON('test/demo1.json', {
			page : curr || 1
		//向服务端传的参数，此处只是演示
		}, function(res) {
			//此处仅仅是为了演示变化的内容
			var demoContent = (new Date().getTime() / Math.random() / 1000) | 0;
			document.getElementById('view1').innerHTML = res.content + demoContent;
			//显示分页
			laypage({
				cont : 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
				pages : res.pages, //通过后台拿到的总页数
				curr : curr || 1, //当前页
				jump : function(obj, first) { //触发分页后的回调
					if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
						demo(obj.curr);
					}
				}
			});
		});
	};
	//运行
	demo();
</script>

</html>
